<template>
  <div class="course-doc-container">

    <div class="box">

      <div v-for="(obj,i) in docList" :key="obj.courseDocId" class="d-doc" @click="goDoc(obj)">
        <div>
          <!--          <IconAli :sty="{width:'20px',height:'20px',marginTop:'3px'}" icon='down'></IconAli>-->
          <IconAli :sty="{width:'20px',height:'20px',marginTop:'3px'}" icon='link'></IconAli>
          <!--          <IconAli :sty="{width:'20px',height:'20px',marginTop:'3px'}" icon='exercises'></IconAli>-->
        </div>
        <div class="doc-name">
          {{ obj.courseDocName }}
        </div>
      </div>

      <div class="error" @click="errorDoc">
        文档报错
      </div>

      <div v-if="docErrorFlag">
        <div class="err-box">
          <CheckboxGroup v-model="errDocList">
            <Checkbox :label="obj.courseDocId"
                      v-for="(obj,i) in docList"
                      :key="obj.courseDocId"
                      class="e-doc">
              {{ obj.courseDocName }}
            </Checkbox>
          </CheckboxGroup>

          <div class="option">
            <div style="color:#F00;margin-left: 6px">错误原因</div>
            <div class="choose">
              <div class="reason">
                <Checkbox label="1" border>文档与视频不一致</Checkbox>
              </div>
              <div class="reason">
                <Checkbox label="2" border>文档链接不可用</Checkbox>
              </div>
              <div class="reason">
                <Checkbox label="3" border>文档内容有错误</Checkbox>
              </div>
              <div class="reason">
                <Checkbox label="4" border>文档缺失</Checkbox>
              </div>
              <div class="reason">
                <Checkbox label="0" border>其他</Checkbox>
              </div>
              <div class="reason" style="margin-right: 4px;padding-bottom: 10px;">
                <Input v-model="errDesc"
                       type="textarea"
                       show-word-limit
                       maxlength="600"
                       :rows="4"
                       placeholder='请输入详细描述...
感谢您的支持'/>
              </div>

              <div style="margin: 0px 4px;padding-bottom: 10px">
                <Button type="success" long @click="submitError">提交</Button>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div v-if="tkFlag" class="tks">
        提交成功！我们将立即改进！
        <br>
        感谢您对本站的支持！
      </div>
    </div>
  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "CourseDoc",
  props: [],
  //组件注册
  components: {
    IconAli
  },
  //数据驱动
  data() {
    return {
      courseDetailId: "",    //课程id
      docList: [],         //文档列表
      docErrorFlag: false,   //文档报错
      errDocList: [],      //错误文档
      errDesc: "",         //错误描述
      tkFlag: false,       //感谢
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //查询文档
    selectDocByCourseDetailId() {
      this.axios.get(`/course/course-doc/${this.courseDetailId}`)
          .then((data) => {
            this.docList = data.data
          })
    },
    goDoc(obj) {
      window.open(obj.courseDocUrl, '_blank');
    },
    //文档报错
    errorDoc() {
      this.docErrorFlag = !this.docErrorFlag
    },
    //提交错误
    submitError() {
      this.docErrorFlag = false
      this.tkFlag = true
      setTimeout(() => {
        this.tkFlag = false
      }, 5200)
    }
  },
  //钩子函数
  mounted() {
    let query = this.$route.query;
    this.courseDetailId = query.cd_id;

    if (this.docList.length == 0) {
      this.selectDocByCourseDetailId();
    }
  }
}
</script>

<style lang="less" scoped>
.course-doc-container {

  /*文档列表*/

  .d-doc {
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 10px;
    padding-left: 6px;
    background-color: #FFF;
    display: flex;
  }

  .d-doc:hover {
    border: 1px solid #f66565;
  }

  .doc-name {
    margin-left: 6px;
    font-size: 14px;
  }

  /*文档报错*/

  .error {
    font_size: 12px;
    margin-top: 40px;
    cursor: pointer;
    width: 70px;
    text-align: center;
    border-radius: 4px;
    background-color: #FFF;
    border: 1px solid #F00;
    color: #F00;
  }

  .err-box {
    margin-top: 20px;
    background-color: #FFF;
  }

  .e-doc {
    padding-left: 4px;
    height: 26px;
    line-height: 26px;
    margin-top: 4px;
    display: block;
  }

  .option {
    margin-top: 20px;

    .reason {
      margin: 8px 0px 0px 4px;
    }
  }

  .tks {
    margin-top: 18px;
    font-size: 18px;
    color: #F00;
  }
}
</style>